<template>
  <view class="agent">
    <view class="agent__head">
      <u-search
        placeholder="请输入商户名称或编号"
        v-model="merchantNo"
        shape="square"
        bg-color="#f6f6f6"
        :show-action="false"
        @search="searchList"
        @change="handerCustom"
      ></u-search>
    </view>
    <scroll-view
      class="home__grid-group mt-20"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view>
        <!-- value="费率变更" -->
        <u-card
          :title="item.lsMerchantName"
          :thumb="thumb"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="card_list" slot="body">
            <view
              class="config-text"
              @click="goConfigFn(item)"
              v-if="item.agentNo === agentNo ? true : false"
            >
              费率变更
            </view>
            <view class="u-body-item u-flex u-p-b-10">
              <view class="u-body-item-title u-line-2">商户编号：</view>
              <view class="">
                {{ item.merchantNo }}
              </view>
            </view>
            <view class="u-body-item u-flex u-p-b-10">
              <view class="u-body-item-title u-line-2">电话：</view>
              <view class="">
                {{ item.lsMerchantPhone }}
              </view>
            </view>
            <view class="u-body-item u-flex u-p-b-10">
              <view class="u-body-item-title u-line-2">注册时间：</view>
              <view class="">
                {{ item.createTime }}
              </view>
            </view>
          </view>
          <view class="card-footer" slot="foot" @click="goDetail(item)">
            <view class="card-footer__btn"> 详情 </view>
          </view>
        </u-card>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        merStatus: '',
        merSubName: '',
        merchantNo: '',
      },
      merchantNo: '',
      pageNo: 1,
      pageSize: '10',
      list: [],
      scrollTop: 0,
      status: 'loadmore',
      thumb: '/static/image/home/icon_examine_store.png',
      agentNo: '', //代理商编号
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  mounted() {
    // 列表数据
    this.merchantInfoQuery();
    this.agentNo = uni.getStorageSync('agentNo');
    console.log('this.agentNo----->', this.agentNo);
  },
  methods: {
    // 费率变更
    goConfigFn(item) {
      this.$u.route({
        url: 'pages/main/merchant/merchantRateChange',
        params: {
          merchantNo: item.merchantNo,
        },
      });
    },
    // 费率变更
    goDetail(item) {
      this.$u.route({
        url: 'pages/main/merchant/merchantDetail',
        params: {
          merchantNo: item.merchantNo,
        },
      });
    },
    // 数据框触发事件
    searchList(e) {
      console.log('searchList-------->', this.merchantNo);
      this.params.merchantNo = this.merchantNo;
      this.pageNo = 1;
      this.list = [];
      this.merchantInfoQuery();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.merchantInfoQuery();
    },
    // 列表数据
    merchantInfoQuery() {
      const _that = this;
      this.$zx.user_api
        .merchantInfoQuery(this.pageNo, this.pageSize, this.params)
        .then((data) => {
          console.log('merchantInfoQuery----->109', data);
          _that.list = _that.list.concat(data);
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
    // 输入框内容发生变化时触发
    handerCustom(e) {
      if (e === '') {
        // 重新获取数据更新页面
        this.searchList();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.agent {
  // background-color: white;

  &__head {
    padding: 10rpx 20rpx;
  }
  .agent__head {
    background-color: white;
  }
}

.card-footer {
  display: flex;
  flex-direction: row-reverse;

  &__btn {
    border: 1rpx solid #9d60ff;
    color: #9d60ff;
    padding: 10rpx 30rpx;
    border-radius: 50rpx;
  }
}
.u-load-more-wrap {
  padding: 16rpx 0rpx;
  text-align: center;
}
::v-deep .card_list {
  .config-text {
    color: #9d60ff;
    position: absolute;
    top: 32rpx;
    right: 26rpx;
    background: #ebf6fe;
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
    font-size: 28rpx;
  }
}
</style>
